<template>
  <aside class="sidebar">
    <div class="logo">
      <div class="logo-icon">🏠</div>
      <span class="logo-text">YT 宿舍</span>
    </div>
    
    
    <nav class="nav">
      <ul class="nav-list">
        <li class="nav-item">
          <router-link to="/" class="nav-link">
            <span class="nav-icon">📊</span>
            <span class="nav-text">统计首页</span>
          </router-link>
        </li>
        
        <li class="nav-item">
          <div class="nav-group">
            <div class="nav-group-header" @click="toggleGroup('dormitory')">
              <span class="nav-icon">🏢</span>
              <span class="nav-text">宿舍管理</span>
              <span class="nav-arrow" :class="{ rotated: expandedGroups.dormitory }">▼</span>
            </div>
            <ul class="nav-sub" v-show="expandedGroups.dormitory">
              <li><router-link to="/dormitory/building" class="nav-link sub">楼栋管理</router-link></li>
              <li><router-link to="/dormitory/room" class="nav-link sub">房间管理</router-link></li>
              <li><router-link to="/dormitory/bed" class="nav-link sub">床位管理</router-link></li>
              <li><router-link to="/dormitory/allocation" class="nav-link sub">宿舍分配</router-link></li>
             <li><router-link to="/dormitory/room-label" class="nav-link sub">宿舍标签管理</router-link></li>
            </ul>
          </div>
        </li>
        
        <li class="nav-item">
          <div class="nav-group">
            <div class="nav-group-header" @click="toggleGroup('user')">
              <span class="nav-icon">👥</span>
              <span class="nav-text">用户管理</span>
              <span class="nav-arrow" :class="{ rotated: expandedGroups.user }">▼</span>
            </div>
            <ul class="nav-sub" v-show="expandedGroups.user">
              <li><router-link to="/user/student" class="nav-link sub">学生信息管理</router-link></li>
              <li><router-link to="/user/profession" class="nav-link sub">专业管理</router-link></li>
              <li><router-link to="/user/maintainer" class="nav-link sub">维修人员信息管理</router-link></li>
            </ul>
          </div>
        </li>
        
        <li class="nav-item">
          <div class="nav-group">
            <div class="nav-group-header" @click="toggleGroup('repair')">
              <span class="nav-icon">🔧</span>
              <span class="nav-text">维修工单管理</span>
              <span class="nav-arrow" :class="{ rotated: expandedGroups.repair }">▼</span>
            </div>
            <ul class="nav-sub" v-show="expandedGroups.repair">
              <li><router-link to="/repair/create" class="nav-link sub">创建工单</router-link></li>
              <li><router-link to="/repair/list" class="nav-link sub">维修工单列表</router-link></li>
            </ul>
          </div>
        </li>
        
        <li class="nav-item">
          <div class="nav-group">
            <div class="nav-group-header" @click="toggleGroup('system')">
              <span class="nav-icon">⚙️</span>
              <span class="nav-text">系统管理</span>
              <span class="nav-arrow" :class="{ rotated: expandedGroups.system }">▼</span>
            </div>
            <ul class="nav-sub" v-show="expandedGroups.system">
              <li><router-link to="/system/user" class="nav-link sub">用户管理</router-link></li>
              <li><router-link to="/system/role" class="nav-link sub">角色管理</router-link></li>
              <li><router-link to="/system/permission" class="nav-link sub">权限管理</router-link></li>
            </ul>
          </div>
        </li>
        
        <li class="nav-item">
          <div class="nav-group">
            <div class="nav-group-header" @click="toggleGroup('score')">
              <span class="nav-icon">⭐</span>
              <span class="nav-text">评分管理</span>
              <span class="nav-arrow" :class="{ rotated: expandedGroups.score }">▼</span>
            </div>
            <ul class="nav-sub" v-show="expandedGroups.score">
              <li><router-link to="/score/violation" class="nav-link sub">违规违纪管理</router-link></li>
              <li><router-link to="/score/hygiene" class="nav-link sub">宿舍卫生管理</router-link></li>
            </ul>
          </div>
        </li>
      </ul>
    </nav>
  </aside>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useAuthStore } from '../stores/auth'  // 引入权限存储
// 引入权限存储
const authStore = useAuthStore()
// 定义菜单与权限的映射关系
const menuPermissionMap = {
  '/dormitory/building': 'dorm:building:view',
  '/dormitory/room': 'dorm:room:view',
  '/dormitory/bed': 'dorm:bed:view',
  '/dormitory/allocation': 'dorm:allocation:view',
  '/user/student': 'user:student:view',
  '/user/profession': 'user:profession:view',
  '/system/user': 'system:user:view',
  '/system/role': 'system:role:view',
  '/system/permission': 'system:permission:view',
  // 其他菜单的权限映射...
}

// 检查是否有权限访问某个菜单
const hasMenuPermission = (path) => {
  // 如果没有定义权限要求，默认显示
  if (!menuPermissionMap[path]) return true
  
  // 检查用户是否拥有该权限
  return authStore.permissions && authStore.permissions.includes(menuPermissionMap[path])
}

// 子菜单展开状态
const expandedGroups = reactive({
  dormitory: false,
  user: false,
  repair: false,
  system: false,
  score: false
})

// 切换子菜单展开状态
const toggleGroup = (groupName) => {
  expandedGroups[groupName] = !expandedGroups[groupName]
  // 保存子菜单状态到本地存储
  localStorage.setItem('expandedGroups', JSON.stringify(expandedGroups))
}

// 初始化状态
onMounted(() => {
  // 从本地存储恢复子菜单状态
  const savedGroups = localStorage.getItem('expandedGroups')
  if (savedGroups) {
    try {
      const parsed = JSON.parse(savedGroups)
      Object.assign(expandedGroups, parsed)
    } catch (e) {
      console.warn('Failed to parse expanded groups from localStorage')
    }
  }
})
</script>

<style scoped>
.sidebar {
  width: 280px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  color: #e2e8f0;
  height: 100vh;
  padding: 1.5rem;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
}

.sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease-in-out;
}



.logo-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.logo-text {
  font-weight: 700;
  font-size: 1.25rem;
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav {
  flex: 1;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  margin-bottom: 0.5rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  color: rgba(226, 232, 240, 0.9);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s ease-in-out;
  position: relative;
}

.sidebar.collapsed .nav-link {
  justify-content: center;
  padding: 0.875rem 0.5rem;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transform: translateX(4px);
}

.nav-link.router-link-active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.nav-link.router-link-active::before {
  content: '';
  position: absolute;
  left: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: #60a5fa;
  border-radius: 0 2px 2px 0;
}

.nav-icon {
  font-size: 1.125rem;
  width: 20px;
  text-align: center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.nav-text {
  flex: 1;
}

.nav-group {
  margin-bottom: 0.5rem;
}

.nav-group-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  color: rgba(226, 232, 240, 0.8);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  user-select: none;
}

.sidebar.collapsed .nav-group-header {
  justify-content: center;
  padding: 0.875rem 0.5rem;
}

.nav-group-header:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.nav-arrow {
  font-size: 0.75rem;
  transition: transform 0.2s ease-in-out;
  margin-left: auto;
}

.nav-arrow.rotated {
  transform: rotate(180deg);
}

.nav-group:hover .nav-arrow {
  transform: rotate(180deg);
}

.nav-sub {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 0.5rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

.nav-sub .nav-link {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: rgba(226, 232, 240, 0.7);
}

.nav-sub .nav-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(2px);
}

.nav-sub .nav-link.router-link-active {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  border-left: 2px solid #6366f1;
  margin-left: -1rem;
  padding-left: 1rem;
}

/* 滚动条样式 */
.sidebar::-webkit-scrollbar {
  width: 4px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

</style>
